<template>
    <div class="app-container" v-loading="loading">
      <el-form
        :model="skuPriceObj"
        :inline="true"
        label-width="110px"
        ref="addP"
        :rules="addPrules"
      >
        <el-divider content-position="left">基础信息</el-divider>
        <!-- tableTypeOptions -->
        <!-- <el-form-item label="渠道类型" prop="salesChannelArr">
          <el-cascader
            v-model="skuPriceObj.salesChannelArr"
            :options="salesChannelOptions1"
            separator="-"
            style="width: 215px"
            :disabled="isDisable"
            @change="handleCascaderChange"
            clearable="true"
          ></el-cascader>
        </el-form-item> -->
        <el-form-item label="表单类型" prop="configType">
          <el-select
            style="width: 215px"
            v-model="skuPriceObj.configType"
            placeholder="请选择表单类型"
            clearable
            @change="configTypeChange"
            size="small"
          >
            <el-option
              v-for="dict in tableTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label="平台名称" prop="platform" v-if="skuPriceObj.configType == 10">
          <el-select
            v-model="skuPriceObj.platform"
            filterable
            clearable
            @change="platformChange"
            placeholder="请选择平台名称"
            style="width: 215px"
          >
            <el-option
              v-for="item in platformOptions"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺名称" prop="shopId" v-if="skuPriceObj.configType == 10">
          <el-select
            v-model="skuPriceObj.shopId"
            placeholder="请选择店铺名称"
            clearable
            size="small"
            style="width: 215px"
            :disabled="
            detail ||
            skuPriceObj.platform == null ||
            skuPriceObj.platform == ''
          "
            filterable
            @change="shopChange"
            @focus="getListShop('', skuPriceObj.platform)"
            :remote-method="shopList"
          >
            <el-option
              v-for="item in shopList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div
          class="reminder"
          v-show="
            skuPriceObj.platform &&
            skuPriceObj.shopId &&
            skuPriceObj.configType &&
            !skuPriceObj.id &&
            showSearch
          "
        >
          平台:{{ this.skuPriceObj.platformName }}，店铺:{{
            this.skuPriceObj.shopName
          }}，请前往 <el-link type="primary" @click="goImportProfile()">《导入配置》</el-link>界面进行配置！
        </div>
        <el-divider content-position="left">文件导入</el-divider>
        <!-- <el-form-item prop="file"> -->
        <div class="upload">
          <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :data="{ id: this.skuPriceObj.id, configType: this.skuPriceObj.configType }"
            :action="upload.url"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <!-- <div class="el-upload__tip" slot="tip">
              <el-link type="info" style="font-size: 12px" @click="importTemplate"
                >下载模板</el-link
              >
            </div> -->
            <div class="el-upload__tip" style="color: red" slot="tip">
              注意：
              <br />
              1、请导入10MB内的“xls”或“xlsx”格式文件！
              <br />
              2、请勿存在合并的单元格！
              <br />
              3、时间字段支持格式：2022-01-01 00:00:00 或 2022/1/1 00:00:00！
            </div>
          </el-upload>
        </div>
        <!-- </el-form-item> -->
      </el-form>
      <!-- 底部确认按钮 -->
      <!-- <div style="display: flex; justify-content: center">
  
        <el-button
          type="primary"
          @click="handleSave"
          v-if="skuPriceObj.auditStatus == 0 || adds"
          v-hasPermi="['goods:guidelinePrice:saveDraft']"
          :disabled="loading"
        >
          保存
        </el-button>
        <el-button type="primary" @click="submit" v-if="!isDisable" :disabled="loading"
          >确定</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </div> -->
      <div style="height: 150px"></div>
      <div class="submit_btn" style="z-index: auto">
        <div class="buttonBox">
          <el-button type="primary" @click="submit" :disabled="loading" v-if="!isDetail"
            >提交</el-button
          >
          <el-button @click="cancel" :disabled="loading">返回</el-button>
        </div>
      </div>
      <div v-if="activate"></div>
    </div>
  </template>
  
  <script>
  import { getDynamicConfigByTypeAndUniqueKey } from "@/api/common/imoprtCenter.js";
  import { getToken } from "@/utils/auth";
  import GoodsSupplier from "@/views/components/GoodsSupplier";
  import { listShop } from "@/api/member/shop";
import { get } from "js-cookie";
  export default {
    mounted() {},
    name: "ImoprtCenterAddImport",
    components: { GoodsSupplier },
    data() {
      return {
        loading: false,
        activate: true,
        //平台
        platformOptions: [],
        //新增表单校验
        addPrules: {
          configType: [{ required: true, message: "表单类型不能为空", trigger: "change" }],
          platform: [{ required: true, message: "平台名称不能为空", trigger: "change" }],
          shopId: [{ required: true, message: "店铺名称不能为空", trigger: "change" }],
          // file: [{ required: true, message: "上传文件不能为空", trigger: "change" }],
        },
        skuPriceObj: {},
        // 导入参数
        upload: {
          // 是否显示弹出层
          // open: false,
          // 弹出层标题
          // title: "",
          // 是否禁用上传
          isUploading: false,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken(), biz_code: "CBI" },
          // 上传的地址
          url:
            process.env.VUE_APP_BASE_API + "/fkmalls-bac/sysDynamicTableConfig/importFile",
        },
        tableTypeOptions: [],
        //店铺
        shopList: [],
        showSearch: false,
      };
    },
    computed: {
      adds() {
        return this.$route.meta.adds;
      },
    },
    //触发回流
    activated() {
      this.activate = false;
      setTimeout(() => {
        this.activate = true;
      });
    },
    async created() {
      //币种字典
      this.getDicts("sys_dynamic_table_type").then((response) => {
        this.tableTypeOptions = response.data;
      });
      //
      this.getDicts("quot_method_type").then((response) => {
        this.quoteMethodOptions = response.data;
      });
      this.getDicts("sys_platform_type").then((res) => {
        let platformList = [];
      res.data.forEach((item) => {
        if (
          item.dictValue == "WEINI_HAIGOU" ||
          item.dictValue == "FKMALLS" ||
          item.dictValue == "DISTRIBUTOR"
        ) {
          platformList.push(item);
        }
      });
      this.platformOptions = platformList;
      });
    },
    methods: {
      goImportProfile(){
        this.$router.push("/common/importProfile/");
      },
      configTypeChange() {
        this.skuPriceObj.platformName = null;
        this.skuPriceObj.platform = null;
        this.skuPriceObj.shopId = null;
        this.skuPriceObj.shopName = null;
        this.skuPriceObj.id = null;
        this.skuPriceObj = { ...this.skuPriceObj };
      },
      platformChange(v) {
        this.platformOptions.forEach((item) => {
          if (item.dictValue == v) {
            this.skuPriceObj.platformName = item.dictLabel;
          }
        });
        this.skuPriceObj.shopId = null;
      this.skuPriceObj.shopName = null;
      this.skuPriceObj = { ...this.skuPriceObj };
      this.getListShop("", v);
        if (
          this.skuPriceObj.platform &&
          this.skuPriceObj.shopId &&
          this.skuPriceObj.configType
        ) {
          this.getDynamicConfigByTypeAndUniqueKey();
        } else {
          this.skuPriceObj.id = null;
        }
      },
      getDynamicConfigByTypeAndUniqueKey() {
        let uniqueKeyList = [
          {
            key: this.skuPriceObj.platform,
            name: this.skuPriceObj.platformName,
          },
          {
            key: this.skuPriceObj.shopId,
            name: this.skuPriceObj.shopName,
          },
        ];
        this.showSearch = false;
        getDynamicConfigByTypeAndUniqueKey({
          uniqueKeyList: uniqueKeyList,
          configType: this.skuPriceObj.configType,
        }).then((res) => {
          this.skuPriceObj.id = res.data;
          this.showSearch = true;
        });
      },
      shopChange(v) {
        this.shopList.forEach((item) => {
          if (item.id == v) {
            this.skuPriceObj.shopName = item.name;
          }
        });
        if (
          this.skuPriceObj.platform &&
          this.skuPriceObj.shopId &&
          this.skuPriceObj.configType
        ) {
          this.getDynamicConfigByTypeAndUniqueKey();
        } else {
          this.skuPriceObj.id = null;
        }
      },
      //获取店铺
      async getListShop(name, platform) {
        let response = await listShop({ name: name , platform: platform });
        this.shopList = response.data;
      },
      //导入
      handleImport() {
        this.upload.title = "导入";
        // this.upload.open = true;
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
        console.log(23121321321);
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.title = "有文件";
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        // this.$alert(response.msg, "导入结果", {
        //   dangerouslyUseHTMLString: true,
        // });
        // this.$message.success(response.msg);
        this.loading = false;
        if (response.code == 200) {
          this.$message.success("导入成功，请前往导入中心查询导入结果");
          this.cancel();
        }
      },
      // 提交上传文件
      submitFileForm() {
        // this.$refs.upload.submit();
      },
      /** 下载模板操作 */
      importTemplate() {
        this.download(
          "goods/guidelinePrice/importTemplate",
          {
            ...this.queryParams,
          },
          `data_${new Date().getTime()}.xlsx`
        );
      },
      //报价方式选框
      handleSeleQuote(e) {},
      //确定按钮
      submit() {
        //表单校验
        this.$refs.addP.validate(async (valid) => {
          if (valid) {
            // console.log(this.upload);
            if (this.$refs.upload.uploadFiles.length > 0) {
              if (this.skuPriceObj.id) {
                this.loading = true;
                this.$refs.upload.submit();
              } else {
                this.$message.error(
                  `平台:${this.skuPriceObj.platformName}，店铺:${this.skuPriceObj.shopName}，请前往导入配置界面进行配置！`
                );
              }
            } else {
              this.$message.error(`上传文件不能为空`);
            }
          }
        });
      },
      //取消
      cancel() {
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.go(-1);
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .divTabulation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .divTabulation > P {
    margin-right: 5px;
  }
  ::v-deep .cell {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .settlementPriceRange {
    width: 100%;
    height: 300px;
  }
  ::v-deep .filter-tree {
    height: 64vh;
  }
  ::v-deep .el-dialog__body {
    overflow: hidden;
  }
  ::v-deep .el-upload-dragger {
    width: 70vh;
    margin: 0 auto;
  }
  ::v-deep .el-step__description {
    margin-top: 10px;
  }
  ::v-deep .el-divider__text {
    font-weight: 550;
    font-size: 15px;
  }
  .upload {
    margin-left: 40px;
  }
  .submit_btn {
    margin-top: 19px;
    position: sticky;
    display: flex;
    bottom: 0;
    justify-content: center;
  }
  .reminder {
    color: red;
    margin-top: 10px;
    line-height: 12px;
    margin-left: 42px;
    font-size: 14px;
  }
  </style>
  